<template>
  <div class="user-normal-info-wrapper">
    <h2>基本信息</h2>
    
    <ul class="user-info-list">
      <li v-for="(key, idx) in userRandomInfoKeys" :key="idx">
        <p>{{ infoMap.get(key) }} : </p>
        <sign-input :sign="userBaseInfos[key]" :defaultSign="infoPlaceholderMap.get(key)"
        @change="renewInfo($event, key)"
        class="sign-input"
        ></sign-input>
      </li>

      <li v-for="(key, idx) in userSelectInfoKeys" :key="idx">
        <p>{{ infoMap.get(key) }} : </p>
        <item-select class="item-select"
        :items="selectInfoItemListMap.get(key)"
        :item="item(key)"
        :placeholder="infoPlaceholderMap.get(key)"
        @selectItem="renewInfo($event, key)"
        ></item-select>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import SignInput from '@/components/utils/Input/SignInput.vue'
import ItemSelect from '@c/utils/Input/ItemSelect.vue';

  export default {
    components: {
      SignInput,
      ItemSelect,
    },
    data() {
      return {
        infoMap: new Map([
          ['username', '用户名'],
          ['avatar', '头像'],
          ['nickname', '昵称'],
          ['sex', '性别'],
          ['sign', '格言'],
          ['birthday', '生日'],
          ['location', '住址'],
          ['education', '文凭'],
          ['university', '大学'],
          ['direction', '主攻方向'],
          ['email', '邮箱'],
          ['userpwd', '密码']
        ]),
        infoPlaceholderMap: new Map([
          ['username', 'NoName'],
          ['avatar', '头像'],
          ['nickname', '小可爱'],
          ['sex', '你是雌性还是雄性？'],
          ['sign', '写下你的格言吧！'],
          ['birthday', '你在哪一天出生呢？'],
          ['location', '你住在哪里呢？'],
          ['education', '你的文凭是什么呢？'],
          ['university', '你毕业于哪所大学呢？'],
          ['direction', '主攻方向'],
          ['email', '邮箱'],
          ['userpwd', '密码']
        ])
      }
    },
    methods: {
      renewInfo(e, key) {
        if(key === 'sex') {
          this.$store.commit('changeBaseInfo', {
            key,
            value: e === '男' ? 1 : 0
          });
          return;
        }
        this.$store.commit('changeBaseInfo', {
          key,
          value: e
        });
      },
      item(key) {
        return key === 'sex' 
        ? this.userBaseInfos.sex === 1
          ? '男'
          : '女'
        : this.userBaseInfos[key];
      }
    },
    computed: {
      ...mapGetters(['userBaseInfos']),
      ...mapState(['educationNames', 'universityNames']),
      userInfoKeys() {
        return Object.keys(this.userBaseInfos);
      },
      userRandomInfoKeys() {
        let list = [
          'username', 'nickname', 'location', 'sign'
        ];
        return this.userInfoKeys.filter(val => {
          return list.includes(val);
        })
      },
      userSelectInfoKeys() {
        let list = [
          'sex', 'education', 'university'
        ];
        return this.userInfoKeys.filter(val => {
          return list.includes(val);
        })
      },
      selectInfoItemListMap(){
        return new Map([
          ['sex', ['男', '女']],
          ['education', this.educationNames],
          ['university', this.universityNames]
        ])
      }
    },
    mounted() {
    }
  }
</script>

<style lang="less" scoped>
@w: var(--userNormalInfoEditWidth);

.user-normal-info-wrapper {
  box-sizing: border-box;
  flex-grow: 1;
  width: @w;
  background-color: white;

  h2, 
  .user-info-list {
    padding: calc(@w * 0.015) calc(@w * 0.04);
  }

  h2 {
    line-height: 2;
    font-size: calc(@w * 0.024);
    font-weight: bold;
    color: var(--black);
    border-bottom: 1px solid var(--light);
  }
  
  .user-info-list {
    li {
      height: calc(@w *0.08);
      line-height: calc(@w * 0.08);
      display: flex;
      align-items: center;

      p {
        width: 25%;
        font-size: calc(@w * 0.022);
        color: var(--black);
        text-align: left;
      }

      .sign-input {
        --w: calc(@w * 0.7);
        --h: calc(@w * 0.04);
        --fs: calc(@w * 0.02);
      }

      .item-select {
        --itemSelectWidth: calc(@w * 0.3);
        --itemSelectHeight: calc(@w * 0.04);
        --itemSelectFontsize: calc(@w * 0.02);
      }
    }
  }
}
</style>